<template>
  <view class="hot-products">
		<view class="hot-swiper-box" @click="goToPastHots()">
			<image src="/static/images/gold-go-bg-fsm.png" class="gold-go-bg" mode=""></image>
			<swiper class="swiper" vertical="true"   :autoplay="true" :current="current" :interval="3000" :duration="2000" :circular="true">
				<swiper-item  v-for="(hotItems, index) in hots" :key="index" >
					<view class="item-box">
						<view class="item-box-content" v-for="(hot,index) in hotItems" :key="index">
							<image :src="hot.cover_url" mode=""></image>
							<view class="gold-coins">
								<image src="/static/images/gold-coins-text-icon.png" class="gold-coins-text-icon" mode=""></image>
							  <view class="gold-coins-num">
								  <text class="gold-coins-need">立得<text>{{ parseInt(hot.price_lowest) }}</text> 金豆</text>
							  </view>
							</view>
						</view>
					</view>	
				</swiper-item>
			</swiper>
		</view>
    <!-- <view class="today">
      <today-hot-products-com :pageHasNoMore="pageHasNoMore" ref="todayHotproducts"></today-hot-products-com>
    </view> -->
    <!-- <view class="past"> -->
      <!-- <past-hot-products-com :pageHasNoMore="pageHasNoMore" :hots="hots"></past-hot-products-com> -->
			<!-- <view class="past-hot-products" @click="goToPastHots()">
				<view class="past-hot-products-title">
					<view>往期爆款</view>
				</view>
				<view class="past-hot-products-content">
					<swiper class="swiper" :vertical="false" :indicator-dots="false" :autoplay="true" :current="current" display-multiple-items="1" :interval="3000" :duration="2000" :circular="true" :touchable="false" next-margin="70rpx" easing-function="linear">
					  <swiper-item v-for="(hotItems, index) in hots" :key="index">
					    <view class="swiper-item">
					      <view class="items">
					        <view class="item" v-for="(hot) in hotItems" :key="hot.id">
					          <image class="cover"  :src="hot.product.cover_url"></image>
					          <view class="desc">
					            <view class="price">
					              <view class="unit">￥</view>
					              <view class="money">{{ (hot.product.price_lowest-hot.product.brokerage).toFixed(2) }}</view>
					            </view>
					          </view>
					        </view>
					      </view>
					    </view>
					  </swiper-item>
					</swiper>
				</view>
			</view> -->
			<!-- <view class="activity-area">
				<view class="activity-shoping-money-area" @click="goSpenArea()">
					<view class="activity-shoping-money-area-title">
						<view>购物金区</view>
					</view>
					<view class="activity-area-products">
						<swiper class="activity-swiper" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="3000" :circular="true" :touchable="false">
						  <swiper-item v-for="(item, index) in spendSectionList" :key="index">
						    <view class="swiper-item">
						      <view class="items">
						        <view class="item">
						          <image class="cover" :src="item.cover_url"></image>
						          <view class="desc">
						            <view class="price">
						              <view class="unit">￥</view>
						              <view class="money">{{ (item.price_lowest - item.brokerage).toFixed(2) }}</view>
						            </view>
						          </view>
						        </view>
						      </view>
						    </view>
						  </swiper-item>
						</swiper>
					</view>
				</view>
				<view class="activity-cash-back-area" @click="goCashBack()">
					<view class="activity-cash-back-area-title">
						<view>
							<view>全额返</view>
							<image src="/static/images/vipmoney-icon.png" class="vipmoney-icon" mode=""></image>
						</view>
					</view>
					<view class="activity-area-products">
						<swiper class="activity-swiper" :vertical="false" :indicator-dots="false" :current="current1" :autoplay="true" :interval="3000" :duration="2000" :circular="true" :touchable="false" next-margin="70rpx" easing-function="linear">
						  <swiper-item v-for="(item, index) in returnSectionList" :key="index" >
						    <view class="swiper-item">
						      <view class="items">
						        <view class="item" v-for="(hot) in item" :key="hot.id">
						          <image class="cover" :src="hot.cover_url"></image>
						          <view class="desc">
						            <view class="price">
						              <view class="unit">￥</view>
						              <view class="money">{{ (hot.price_lowest - hot.brokerage).toFixed(2) }}</view>
						            </view>
						          </view>
						        </view>
						      </view>
						    </view>
						  </swiper-item>
						</swiper>
					</view>
				</view>
			</view> -->
    <!-- </view> -->
  </view>
</template>

<script>
import {getHotProducts,getProductsList} from "api/productApi"
import Pagination from "mixins/Pagination"
import TodayHotProductsCom from "./TodayHotProductsCom"
import PastHotProductsCom from "./PastHotProductsCom"
import store from "store"
	import {mapGetters,mapActions} from 'vuex'
export default {
	store,
  name: "HotProductsCom",
	mixins: [Pagination],
  components: {
    PastHotProductsCom,
    TodayHotProductsCom
  },
	computed: {
		...mapGetters(['isLogin']) //isLogin 登录状态
	},
	data: () => ({
	  hots: [],
		returnSectionList:[],
		spendSectionList:[],
		returnSectionTmpLists:[],
		current:0,
		current1:0
	}),
	methods: {
		async goToPastHots() {
		  // uni.navigateTo({url: `/packs/pages/product/hots`})
			if (!await this.isLogin) {
				uni.navigateTo({
					url: '/packs/pages/auth/auth'
				})  
			}else{
				uni.navigateTo({
					url: '/pages/activity/activity'
				})
			}
		},
	  async loadHotProducts() {
	    const response = await getHotProducts({
	      page: 1,
	      "filter[is_today]": 0,
	      include: 'product'
	    })
	    const hots = response.data
	    let newHots = []
	    let tempHots = []
	    for (let i = 0; i < hots.length; i++) {
	      if ((i+1)%3 !== 0) {
	        tempHots.push(hots[i])
	      } else {
	        tempHots.push(hots[i])
	        newHots.push(tempHots)
	        tempHots = []
	      }
	    }
	    this.hots = newHots
	  },
		async loadGoldProducts() {
		  const response = await getProductsList({
		    "is_gold_bean": 1
		  })
		  let hots = response
			let arr = []
			for(var i=0;i<hots.length;i++){
				arr.push(hots.slice(i,i+2))
			}
		
			// this.hots = arr
			
			if(hots.length>6){
				let newHots = []
				let tempHots = []
				for (let i = 0; i < hots.length; i++) {
				  if ((i+1)%2 !== 0) {
				    tempHots.push(hots[i])
				  } else {
				    tempHots.push(hots[i])
				    newHots.push(tempHots)
				    tempHots = []
				  }
				}
				this.hots = newHots
			}else{
				hots = response.concat(response).concat(response)
				let newHots = []
				let tempHots = []
				for (let i = 0; i < hots.length; i++) {
				  if ((i+1)%2 !== 0) {
				    tempHots.push(hots[i])
				  } else {
				    tempHots.push(hots[i])
				    newHots.push(tempHots)
				    tempHots = []
				  }
				}
				this.hots = newHots
			}
		},
		async loadReturnSectionProducts() {
			const response = await getProductsList({
			  page: 1,
			  "filter[is_return_section]": 1
			})
			// this.returnSectionList = response.data
			const hots = response.data;
			let newHots = []
			let tempHots = []
			for (let i = 0; i < hots.length; i++) {
			  if ((i+1)%2 !== 0) {
			    tempHots.push(hots[i])
			  } else {
			    tempHots.push(hots[i])
			    newHots.push(tempHots)
			    tempHots = []
			  }
			}
			if(this.returnSectionList.length<3){
				this.returnSectionList = newHots.concat(newHots).concat(newHots)
			}else{
				this.returnSectionList = newHots
			}
			
		},
		async loadSpendSectionProducts() {
			const response = await getProductsList({
			  page: 1,
			  "filter[is_spend_section]": 1
			})
			this.spendSectionList = response.data
		},
		
	  // goToPastHots() {
	  //   uni.navigateTo({url: `/packs/pages/product/hots`})
	  // },
		goSpenArea() {
		  uni.navigateTo({url: `/packs/pages/product/spendArea`})
		},
		goCashBack() {
		  uni.navigateTo({url: `/packs/pages/product/cashBack`})
		},
		async refresh(){
			// this.$refs.todayHotproducts.refresh()
			// await this.loadReturnSectionProducts()
			// await this.loadHotProducts()
		}
	},
	async created() {
		await this.loadGoldProducts()
	  // await this.loadHotProducts()
		// await this.loadReturnSectionProducts()
		// await this.loadSpendSectionProducts()
		this.current = 1
		if(this.returnSectionList.length>2){
			this.current1 = 1
		}
	}
}
</script>

<style lang="scss" scoped>
.hot-products{
  display: flex;
  justify-content: space-between;
}
.past-hot-products{
	width: 350rpx;
	height: 264rpx;
	overflow: hidden;
	background: #FFFFFF;
	border-radius: 16rpx;
	.past-hot-products-title{
		width: 350rpx;
		height: 86rpx;
		background:url(../../../static/images/past-hot-products-bg.png) no-repeat center;
		background-size: cover;
		>view{
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			margin: 0rpx 0 0 12rpx;
			padding-top: 12rpx;
		}
	}
	.swiper{
		height: 178rpx;
		overflow: hidden;
	}
	.swiper-item{
		height: 178rpx;
		overflow: hidden;
		.items{
			// width:90%;
			margin:0 auto;
			display: flex;
			height: 178rpx;
			overflow: hidden;
			.item{
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 178rpx;
				overflow: hidden;
				border-radius: 20rpx;
				.cover{
					width: 116rpx;
					height: 116rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
	.price{
		display: flex;
		align-items:flex-end;
		margin-top:12rpx;
		.unit{
			font-size: 20rpx;
			line-height: 20rpx;
			font-weight: 400;
			color: #FF4924;
		}
		.money{
			font-size: 28rpx;
			font-weight: bold;
			color: #FF4924;
			line-height:28rpx;
		}
	}
}
.activity-area{
	width: 350rpx;
	height: 264rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-top: 8rpx;
	display: flex;
	>view{
		width: 100%;
	}
	>view:nth-child(1){
		border-right: 1rpx solid #F0F0F0;
	}
	
}
.activity-shoping-money-area-title{
	height: 86rpx;
	border-radius: 16rpx 0 0 0;
	background: url(../../../static/images/shoping-area-bg.png) no-repeat center;
	background-size: 100%;
	>view{
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 600;
		color: #333333;
		margin:0 0 0 12rpx;
		padding-top:12rpx;
	}
}
.activity-cash-back-area-title{
	height: 86rpx;
	border-radius: 0 16rpx 0 0;
	background: url(../../../static/images/cash-back-bg.png) no-repeat center;
	background-size: 100%;
	>view{
		display: flex;
		padding-top: 12rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: 600;
			color: #333333;
			margin-left: 12rpx;
		}
		.vipmoney-icon{
			display: block;
			width: 52rpx;
			height:28rpx;
			margin-left: 8rpx;
		}
		>view:nth-child(2){
			width: 52rpx;
			height: 28rpx;
			background: #FF9711;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16rpx;
			font-weight: 600;
			color: #FFFFFF;
			margin-left: 5rpx;
		}
	}
}
.activity-area-products{
	width: 100%;
	height: 178rpx;
	overflow:hidden;
	.activity-swiper{
		height: 178rpx;
		overflow:hidden;
		.items{
			// width:85%;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			height: 178rpx;
			overflow: hidden;
			.item{
				width: 50%;
				// width: 80%;
				display: flex;
				flex-direction: column;
				align-items: center;
				// justify-content: center;
				height: 178rpx;
				overflow: hidden;
				border-radius: 20rpx;
				.cover{
					width: 116rpx;
					height: 116rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
	.price{
		display: flex;
		align-items:flex-end;
		margin-top:12rpx;
		.unit{
			font-size: 20rpx;
			line-height: 20rpx;
			font-weight: 400;
			color: #FF4924;
		}
		.money{
			font-size: 28rpx;
			font-weight: bold;
			color: #FF4924;
			line-height:28rpx;
		}
	}
}

.hot-swiper-box{
	width: 710rpx;
	height: 536rpx;
	overflow: hidden;
	position: relative;
	.gold-go-bg{
		display: block;
		width: 710rpx;
		height: 536rpx;
		position: absolute;
		left:0;
		top:0;
		z-index:0;
	}
	.swiper{
		width:684rpx;
		height: 406rpx;
		background: #FFFFFF;
		margin: 118rpx auto 0;
		border-radius: 12px;
		position: relative;
		z-index: 1;
		.item-box{
			display: flex;
			justify-content: space-between;
			>view:nth-child(1){
				margin-left: 14rpx;
			}
			>view:nth-child(2){
				margin-right: 14rpx;
			}
			.item-box-content{
				width: 320rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				>image{
					display: block;
					width: 320rpx;
					height: 320rpx;
					border-radius: 16rpx;
					margin-top: 14rpx;
				}
			}
		}
	}
}
.gold-coins{
		width: fit-content;
		height: 28rpx;
		background: #FEECDF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 25rpx 0 4rpx 0rpx;
	}
	.gold-coins-text-icon{
		display: block;
		width: 32rpx;
		height: 24rpx;
	}
	.gold-coins-text{
		width: 54rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF4924;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 5rpx;
	}
	.gold-coins-num{
		min-width: 64rpx;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		.redbg{
			display: block;
			width: 100%;
			height:100%;
			position: absolute;
			right: 0;
			top:0;
			z-index: 0;
		}
		.gold-coins-need{
			height: 100%;
			position: relative;
			z-index: 1;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #77493B;
			padding: 0 8rpx;
			display: flex;
			align-items: center;
			font-size: 22rpx;
			line-height: 22rpx;
			text{
				font-size: 24rpx;
			}
		}
	}

// /deep/ uni-swiper .uni-swiper-wrapper{
// 	overflow: visible!important;
// }

</style>
